{% extends 'base_with_top_menu.html' %}

{% load go_back_link %}

{% block title %}List of sent emails{% endblock %}

{% block header %}List of sent emails{% endblock %}

{% block content %}
    {% if display_tips %}
    <div class="tip">
      <ol>
        <li><p>For some events only mails are sent. They are: book reserving and book renting. Others will be added soon (just a matter of time).</p></li>
        <li><p>Email body may differ (but not significantly) from the one that was sent. Why? Because to display the body <a href="http://docs.djangoproject.com/en/dev/ref/templates/builtins/#linebreaks">django's linebreaks tag</a> was used.</p></li>
        <li><p>Known bug: reservation confirmation email says 'Come & rent' even if book is not rentable (i.e. it's unavailable).</p></li>
      </ol>
    </div>
    {% endif %}

    <div class="inner_menu">
      <ul>
        <li><a href="{% url emaillog_latest 200 %}">Latest 200</a></li>
        <li><a href="{% url emaillog_latest 1000 %}">Latest 1000</a></li>
        <li><a href="{% url emaillog_latest 5000 %}">Latest 5000</a></li>
        <li><a href="{% url emaillog_latest 20000 %}">Latest 20000</a></li>
        <li><a href="{% url emaillog_all %}">All emails</a></li>
      </ul>
    </div>



<style type="text/css">
.hidden { display:none; }
</style>

<script type="text/javascript">

var togglingText = "We are sorry to inform that you have overdued your rental on ";
// var togglingText = "C++";

$(function() {
    $("#check").click(function() {
        var toggleClass = 'toggled';
        if ($(this).hasClass(toggleClass)) {
          $(this).removeClass(toggleClass);
          $("table.emails tr").each(function(i) {
              var tr = this;
              $(tr).find("td.body").each(function() {
                  if ($(this).html().indexOf(togglingText)!=-1) {
                    $(tr).removeClass("hidden");
                  }
                });
            });
          $("#hiddenElementsCount").html('All shown');
        }
        else {
          $(this).addClass(toggleClass);
          var hiddenElementsCount = 0;
          var totalElements = -1;       // one reserved for table header
          $("table.emails tr").each(function(i) {
              totalElements++;
              var tr = this;
              $(tr).find("td.body").each(function() {
                  if ($(this).html().indexOf(togglingText)!=-1) {
                    $(tr).addClass("hidden");
                    hiddenElementsCount++;
                  }
                });
            });
          $("#hiddenElementsCount").html(''+hiddenElementsCount + ' of ' + totalElements + ' (' + Math.round(100*hiddenElementsCount/totalElements) + '%)');
        }
        return false;
      });
  });

$(function() {    $("#check").button();    });
$(document).ready(function() {
    $("#check").trigger('click');
  });

</script>

<div class="overdueToggleButton">
<input type="checkbox" id="check" /><label for="check">Show/Hide 'We are sorry to inform of overdue on '</label>
<span id="hiddenElementsCount"></span>
</div>







    <div class="emails_wrapper">
      {% if emails %}
      <table class="emails">
        <tbody>
          <tr><th>Sent date</th> <th>From</th> <th>To</th> <th>Body</th> </tr>
          {% for email in emails %}
             <tr><td>{{email.sent_date|date:"d.m.Y H:i"}}</td> <td>{{email.sender}}</td> <td>{{email.receiver}}</td> <td class="body">{{email.body|linebreaks}}</td> </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}
      <p>No email logs -- log is empty.</p>
      {% endif %}
    </div>

{% endblock %}

